<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../default/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../default/css/index.css" />
    <style>
        body{
            background: #f2f2f2;
        }
        header a{
            color: #fff;
        }
        .mui-bar .mui-title{
            color: #fff;
        }
        .mui-content{
            background: #f2f2f2;
        }
        .mui-bar-nav~.mui-content{
            padding-bottom: 50px;
        }
        .cash-withdrawal-btn{
            width: 100px;
            vertical-align: inherit;
        }
        .mui-bar-transparent{
            background: rgba(255,219,40,0);
        }
        .mui-content{
            padding-bottom: 50px;
        }

        /*覆盖样式*/
        .address-box{
            border-radius: 0;
            margin: 0;
        }
        .order-deta-box{
            border-radius: 0;
            padding: 20px 0;
        }
        .mui-table-view:before,.mui-table-view-cell:after,.mui-table-view:after{
            background-color: #f5f6f7;
        }
        .order-deta-box ul li{
            font-size: 14px;
        }
        .foot-btn-box{
            display: none;
        }


        .modtai-control-box{
            top: 20%;
        }

        .jianbiancolor{
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        }
        .day-task-box{
            padding: 0;
            border-radius: 10px;
            overflow: hidden;
            text-align: center;
        }
        .day-task-title{
            padding: 10px 15px;
        }
        .modtai {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 10;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: none;
        }
        .modtai-control-box{
            position: fixed;
            top: 20%;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 11;
            padding: 10px 15px;
            display: none;
            width: 90%;
            margin:0 auto;

        }
        .day-task-progressbar-box{
            margin: 10px auto;
        }
        .day-task-progressbar-box .mui-progressbar{
            height: 10px;
            border-radius: 20px;
            background: #f5f5f5;
        }
        .day-task-progressbar-box .mui-progressbar span{
            background-color: #ffdb28;
        }
        .day-task-centan{
            border-radius: 5px;
            border: 1px solid #f5f5f5;
            -moz-box-shadow:0px 1px 15px #f5f5f5; -webkit-box-shadow:0px 1px 15px #f5f5f5; box-shadow:0px 1px 15px #f5f5f5;
            padding: 10px 15px;

        }
        .ewm-box{
            background: #fff;
            padding: 10px 15px;
        }
        .ewm-box button{
            margin: 10px auto;
        }
        .address-box,.courierNumber{
            display: none;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-transparent" >
    <a class="mui-icon mui-icon-left-nav mui-pull-left back-tohost"></a>
    <h1 class="mui-title">订单详情</h1>
    <a class="mui-icon mui-icon-more mui-pull-right" href="#forward"></a>
</header>

<div class="mui-content">
    <div class="order-type-tit-box">
        <h1 id="orderStatus">--</h1>
    </div>
    <div class="address-box">
        <div class="mui-col-xs-2 mui-col-sm-2 mui-inline">
            <div class="address-icon">
                <span class="mui-icon mui-icon-location"></span>
            </div>
        </div>
        <div class="mui-col-xs-9 mui-col-sm-9 mui-inline ">
            <p><b id="consigneeName"></b><span id="consigneeTelephone"></span></p>
            <h5 id="addressName"></h5>
            <!--<i class="mui-icon mui-icon-arrowright address-list-box"></i>-->
        </div>
    </div>
    <div class="top-shadow"></div>
    <div class="order-deta-box">
        <!--<h5>枢纽科技旗舰店</h5>-->
        <div class="order-deta-tiy">
            <div class="mui-col-xs-4 mui-col-sm-4 mui-inline">
                <img id="encryptedName" src="" alt="">
            </div>
            <div class="mui-col-xs-5 mui-col-sm-5 mui-inline">
                <div class="mui-ellipsis-2" id="tradeName"></div>
                <p style="margin: 20px auto">产品规格: <b id="specificationName"></b></p>
            </div>
            <div class="mui-col-xs-2 mui-col-sm-2 mui-inline mui-text-right">
                <p><span id="commodityPrice"></span></p><p>x <b class="">1</b></p>
            </div>
        </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                数量
                <span class="mui-badge mui-badge-warning">X1</span>
            </li>
            <!--<li class="mui-table-view-cell">
                配送方式
                <span class="mui-badge mui-badge-warning">普通配送</span>
            </li>-->
            <li class="mui-table-view-cell">
                订单备注
                <div id="remarks">
                </div>
            </li>
            <div class="subtotal-box pading10-15">
                共 <em>1</em>件 <span style="color: #000">需付款: </span><span style="color: red"><b class="purchaseAmount"></b></span>
            </div>
        </ul>
        <div class="top-shadow"></div>

        <div class="order-deta-box">
            <h5>订单信息</h5>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    订单编号
                    <span class="mui-badge mui-badge-warning" id="orderNumber"></span>
                </li>
                <li class="mui-table-view-cell">
                    创建时间
                    <span class="mui-badge mui-badge-warning" id="submissionTime"></span>
                </li>
                <li class="mui-table-view-cell courierNumber" data-clipboard-text="">
                    快递单号
                    <span class="mui-badge mui-badge-warning" id="courierNumber" ></span>
                </li>
            </ul>
        </div>

    </div>

    <nav class="foot-btn-box mui-text-right">
        <!--<button type="button" class="mui-btn mui-btn-danger cash-withdrawal-btn">取消订单</button>-->
        <button type="button" class="mui-btn mui-btn-danger cash-withdrawal-btn subm-this-order">付款</button>
    </nav>



    <!--弹出菜单-->
   <!-- <div class="modtai-control-box">
        <div class="day-task-box">
            <div class="jianbiancolor">
                <div class="day-task-icon-clos mui-text-right"><i class="mui-icon mui-icon-closeempty"></i></div>
                <div class="day-task-title">
                    <h4>支付金额: ￥<b class="purchaseAmount"></b></h4>
                    <p>已确定订单信息，请选择支付方式</p>
                </div>
            </div>
            <div class="ewm-box">
                <button type="button" class="mui-btn mui-btn-danger cash-withdrawal-btn" data-payment-method="1">微信支付</button>
                <button type="button" class="mui-btn mui-btn-danger cash-withdrawal-btn" data-payment-method="2">余额支付</button>
                <button type="button" class="mui-btn mui-btn-danger cash-withdrawal-btn cancel-order read-payment" data-payment-method="3">阅读宝支付</button>
            </div>
        </div>
    </div>
    <div class="modtai modtai-control-hied"></div>-->


</div>



<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->

<script>
    mui.init();

    // ajax地址

    // 获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }

    //获取url中的targetId参数
    var orderId;

    $(function () {
        orderId = localStorage.getItem('orderId')
        OrderController();
        findByUserBalance();
    });


    // 订单金额
    var purchaseAmount = '';
    // 订单号
    var orderNumber='';
    // 付款状态
    var orderStatus = '';
    var tradeName='';
    // 订单阅读宝数量
    var commodityReadingTreasure;
    // 用户阅读宝余额s
    var balance;
    // 产品是否是会员产品
    var designatedProduct;
    // 用户是否是vip
    var uservip;
    function OrderController() {
        mui.showLoading("正在加载..", "div");
        if(orderId=='' || orderId==null){
            mui.alert('请选择需要查看的订单', '错误', function () {
                localStorage.removeItem("orderId");
                mui.openWindow({
                    url: 'myOrder-list.html',
                });
            });
        }
        $.ajax({
            url:website+'/OrderController/findById',
            type:'post',
            data:{
                id:orderId
            },
            success:function (data) {
                console.log(data);
                if(data.data.orderStatus == '未付款'){
                    $(".foot-btn-box").show();
                };
                $("#orderStatus").html(data.data.orderStatus);
                orderStatus=data.data.orderStatus;


                $("#encryptedName").attr('src',data.data.commodity.encryptedName);
                $("#tradeName").html(data.data.commodity.tradeName);
                tradeName=data.data.commodity.tradeName;
                $("#specificationName").html(data.data.specificationName);
                $("#remarks").html(data.data.remarks);
                commodityReadingTreasure=data.data.commodityReadingTreasure;
                if(commodityReadingTreasure==0){
                    $(".purchaseAmount").html('￥'+data.data.purchaseAmount);
                    $("#commodityPrice").html('￥'+data.data.purchaseAmount);
                }else if(data.data.purchaseAmount==0 || data.data.purchaseAmount=='' ||data.data.purchaseAmount==null){
                    $(".purchaseAmount").html(commodityReadingTreasure+'阅读宝');
                    $("#commodityPrice").html(commodityReadingTreasure+'阅读宝');

                }else{
                    $(".purchaseAmount").html('￥'+data.data.purchaseAmount+'+'+commodityReadingTreasure+'阅读宝');
                    $("#commodityPrice").html('￥'+data.data.purchaseAmount+'+'+commodityReadingTreasure+'阅读宝');
                }
                designatedProduct=data.data.commodity.designatedProduct;
                uservip=data.data.user.member;
                purchaseAmount=data.data.purchaseAmount;
                $("#orderNumber").html(data.data.orderNumber);
                orderNumber=data.data.orderNumber;
                $("#submissionTime").html(data.data.submissionTime);
                if(data.data.commodity.commodityInventory==0 || data.data.commodity.commodityInventory==null || data.data.commodity.commodityInventory==''){
                    $(".subm-this-order").addClass('this-shop-full');
                }
                if(designatedProduct!='是'){
                    $(".address-box").show();
                    $("#addressName").html(data.data.receivingAddress.addressName+data.data.receivingAddress.detailedAddress);
                    $("#consigneeName").html(data.data.receivingAddress.consigneeName);
                    $("#consigneeTelephone").html(data.data.receivingAddress.consigneeTelephone);

                    $(".courierNumber").show();
                    if(data.data.courierNumber==null || data.data.courierNumber==''){
                        $("#courierNumber").html('等待商家发货');
                    }else{
                        $(".courierNumber").attr('data-clipboard-text',data.data.courierNumber);
                        $("#courierNumber").html(data.data.courierNumber);
                    }
                }

                mui.hideLoading();
            },error: function () {
                mui.alert('请选择需要查看的订单', '错误', function () {
                    localStorage.removeItem("orderId");
                    mui.openWindow({
                        url: 'http://newst.whilte.com/index.html',
                    });
                });
            }
        });

    }


    mui('.foot-btn-box').on('tap', '.subm-this-order', function(e) {
        e.preventDefault();
        userPaymen();
    });

    // mui('.order-deta-box').on('tap', '.courierNumber', function(e) {
        /*var text = $('#courierNumber').text();
        if(text=='等待商家发货' || text==''){
            console.log(text);
        }else{

        }*/


    // });

    $(".courierNumber").click(function () {
        //复制初始化
        var clipboard = new Clipboard('.courierNumber');
        //成功
        clipboard.on('success', function (e) {
            mui.toast('复制成功');
        });
        //失败
        clipboard.on('error', function (e) {
            mui.toast('复制失败，请手动复制');
        });
    })


    // 支付
    function userPaymen() {

        if(orderStatus != "未付款"){
           /* mui.alert('该订单已经付过款了', '错误', function () {
                mui.showLoading("正在加载..", "div");
                setTimeout(function () {
                    mui.hideLoading();
                    localStorage.removeItem("orderId");
                    mui.openWindow({
                        url: 'myOrder-list.html',
                    });
                }, 500);
            });*/
           $(".foot-btn-box").hide();
           return false;
        }else if(uservip=='是' && designatedProduct=='是'){
            mui.alert('VIP用户不可继续购买VIP产品', '提示', function () {
                mui.openWindow({
                    url: 'myOrder-list.html'
                });
            });
            return false;
        }else if($(".subm-this-order").hasClass('this-shop-full')){
            mui.alert('该产品库存不足!', '提示', function () {
                mui.openWindow({
                    url: 'myOrder-list.html'
                });
            });
            return false;
        }else if(balance<commodityReadingTreasure){
            mui.alert('您的阅读宝余额不足，不能支付此订单', '提示', function () {
                mui.showLoading("正在加载..", "div");
                setTimeout(function () {
                    mui.hideLoading();
                    localStorage.removeItem("orderId");
                    mui.openWindow({
                        url: 'myOrder-list.html',
                    });
                }, 500);
            });
            return;
        }else{
            localStorage.setItem('orderId',orderId);
            localStorage.setItem('totalPrice',purchaseAmount);
            localStorage.setItem('orderNumber',orderNumber);
            localStorage.setItem('orderStatus',orderStatus);
            localStorage.setItem('tradeName',tradeName);
            localStorage.setItem('commodityReadingTreasure',commodityReadingTreasure);
           // window.location.href='payment.html'
             window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed752d87990909bb&redirect_uri=http://newst.whilte.com/templets/html/payment.html&response_type=code&scope=snsapi_base#wechat_redirect';

        }

    }


    // 查询用户的分销佣金和阅读宝,和朋友
    function findByUserBalance() {
        // 查询用户的阅读宝和余额
        $.ajax({
            url: website + '/UserController/findByUserBalance ',
            type: 'post',
            data: {userId: userId},
            success: function (data) {
                if (data.data.balance == null) {
                    $("#balance").html('0');
                    balance=0;
                } else {
                    balance=data.data.balance;
                }

            }, error: function () {
                mui.showLoading("发生错误,返回首页..", "div");
                mui.openWindow({
                    url: "http://newst.whilte.com/index.html",
                });
            }
        });

    };





    mui('header').on('tap', '.back-tohost', function(e) {
        e.preventDefault();
        localStorage.removeItem("orderId");
        mui.openWindow({
            url: "myOrder-list.html",
        });
    });

    $(function () {
        pushHistory();
        window.addEventListener("popstate", function (e) {
            localStorage.removeItem("orderId");
            mui.openWindow({
                url: "myOrder-list.html",
            });
        }, false);
        function pushHistory() {
            var state = {
                title: "title",
                url: "#"
            };
            window.history.pushState(state, "title", "#");
        }
    });

</script>
</body>
</html>